<template>
  <div id="app">
      <transition name="slide-down">
      	<keep-alive>
            <router-view class="router-view"></router-view>
        </keep-alive>
      </transition>
      <div class="modle_login" v-show="showLogin">
        <Login></Login>
      </div>
  </div>
</template>

<script>
import Login from './components/wap/smallPage/Login'
import { mapGetters } from 'vuex'
export default {

  data() {
    return{
      
    }
  },

  components: {
    Login
  },

  computed: {
    ...mapGetters([
        'showLogin'
      ])
  }

}
//beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed   methods  components  computed
</script>

<style lang="scss">
@function rem($px){
	@return ($px/75)+rem;
}

#app {
  width:rem(750);
  margin: 0 auto;
  .modle_login{
    position: fixed;
    width: 100%;
    height:100%;
    top:50%;
    left:50%;
    transform:translate3d(-50%, -50%, 0);
    z-index:99;
    background-color:rgba(0,0,0,.5);
  }
}















.slide-up-enter-active, .slide-up-leave-active {
  transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);
  opacity: .7;
  transform: translate3d(0, 4em, 0);
}
.slide-up-enter, .slide-up-leave-active {
  opacity: .3;
  transform: translate3d(0, 4em, 0);
}

.slide-down-enter-active, .slide-down-leave-active {
  transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);
  opacity: .7;
  transform: translate3d(0, 6em, 0);
}
.slide-down-enter, .slide-down-leave-active {
  opacity: .1;
  transform: translate3d(0, 6em, 0);
}

.slide-left-enter-active, .slide-left-leave-active {
  transition: all .2s cubic-bezier(0, 1.2, 1, 0.5);
  opacity: .5;
  transform: translate3d(2em, 0, 0);
}

.slide-left-enter, .slide-left-leave-active {
  opacity: .3;
  transform: translate3d(2em, 0, 0);
}

.slide-right-enter-active, .slide-right-leave-active {
  transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);
  opacity: .5;
  transform: translate3d(5em, 0, 0);
}
.slide-right-enter, .slide-right-leave-active {
  opacity: .3;
  transform: translate3d(5em, 0, 0);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .4s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
</style>
